<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/inc/taglib.inc" %>
<%@ include file="/WEB-INF/inc/script.inc" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<base href="${base}">
    <title>中金通 | 同类产品</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

	<!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
    <link href="css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">

</head>
<body>
    <div id="wrapper">
    	<!-- 左侧菜单 -->
        <jsp:include page="/WEB-INF/jsp/common/main-menu.jsp"></jsp:include>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        <!-- 头部工具栏区 -->
        <jsp:include page="/WEB-INF/jsp/common/main-header.jsp"></jsp:include>
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
             <div class="col-lg-10">
                 <h2>产品管理</h2>
                 <ol class="breadcrumb">
                     <li>
                            <a href="common/platform">Home</a>
                        </li>
                        <li>
                            <a href="product/list">产品管理</a>
                        </li>
                        <li>
                         <a href="product/list">产品列表</a>
                        </li>
                        <li>
                            <a href="product/detail/${product.id}">${product.briefName}</a>
                        </li>
                        <li class="active">
                            <strong>同类产品</strong>
                        </li>
                </ol>
               </div>
            <div class="col-lg-2">

            </div>
        </div>
		
		<div class="row" style="margin-top:10px;">
			<div class="col-md-12">
                 <div class="tabs-container">
                     <ul class="nav nav-tabs">
                        <li>
								<a href="product/list">
									 产品列表
								</a>
							</li>
							<li>
								<a href="product/add">
								 	新增产品
								</a>
							</li>
							<li class="active">
								<a>
									 同类产品
								</a>
							</li>
                     </ul>
                  	 <div class="tab-content">
                   		<div class="tab-pane active">
                            <div class="panel-body">
                                 <div class="wrapper wrapper-content animated fadeInRight ecommerce">
									<table style="width:800px;height:340px;">
										<tr>
											<td width="340px">
											    <b>已选的同类产品</b>
											    <div style="padding-top:10px">
												<select style="height:300px;" class="form-control" multiple="" id="relatedSelected" name="_relatedId">
												  <c:forEach items="${relatedProductList}" var="p" varStatus="st">
													 <option value="${p.id}" name="${p.briefName}"> ${p.briefName}</option>
												  </c:forEach>
				                                </select>
				                                </div>
											</td>
											<td align="center">
											    <a class="btn btn-white btn-bitbucket" id="addStaff-addAll" onclick="add();"><i class="fa fa-mail-reply"></i></a><br><br>
												<a class="btn btn-white btn-bitbucket" id="addStaff-add" onclick="_remove();"><i class="fa fa-mail-forward"></i></a>
											</td>
											<td width="340px">
											    <b>产品库</b>
											    <div style="padding-top:10px">
												<select style="height:300px;" class="form-control" multiple="" id="relatedUNSelected" name="_relatedId">
												  <c:forEach items="${productList}" var="p" varStatus="st">
													 <option value="${p.id}" name="${p.briefName}"> ${p.briefName}</option>
												  </c:forEach>
				                                </select>
				                                </div>
											</td>
										</tr>
										<tr>
											<td></td>
											<td>
												<div class="form-group">
						                 			<div class="col-sm-2 col-sm-offset-2">
						                 			    <br><br>
						                      			<button class="btn btn-outline btn-primary" type="button" onclick="saveRelatedProduct()">保 存</button>
						                            </div>
						            			</div>
											</td>
											<td></td>
										</tr>
									</table>
									
			                    </div>
						    </div>
        			   </div>
                  </div> 
             </div>
         </div>
         </div>
		</div>
		
        <!-- 底部版权 -->
        <jsp:include page="/WEB-INF/jsp/common/main-footer.jsp"></jsp:include>

        </div>
        </div>

    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/jeditable/jquery.jeditable.js"></script>
	<script src="js/jquery.serialize-object.min.js" type="text/javascript"></script>
    <!-- Custom and plugin javascript -->
    <script src="js/inspinia.js"></script>
    <script src="js/plugins/pace/pace.min.js"></script>
	<script src="js/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
	<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>
    <!-- Data picker -->
    <script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="js/plugins/dataTables/dataTables.responsive.js"></script>
    <script src="js/plugins/dataTables/dataTables.tableTools.min.js"></script>
    
    <!-- 业务 -->
    <script src="js/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
        });
        
        function _remove() {
    		var se1 = $('#relatedSelected')[0];
    		var se2 = $('#relatedUNSelected')[0];
    		var lenth = se1.length;
    		var i=0;
    	    for(;i<lenth; ) {
    	        if(se1[i].selected) {
    	            var opt = document.createElement('option');
    	            opt.value = se1[i].value;
    	            var node = document.createTextNode(se1[i].innerHTML);
    	            opt.appendChild(node);
    	            se2.appendChild(opt);
    	            se1.removeChild(se1[i]);
    	            lenth = lenth -1;
    	            i=0
    	        }
    	        else{
    	        	i++;
    	        }
    	    }
    	}
    	function add() {
    		var se1 = $('#relatedSelected')[0];
    		var se2 = $('#relatedUNSelected')[0];
    		var lenth = se2.length;
    		var i=0;
    	    for(;i<lenth;) {
    	        if(se2[i].selected) {
    	            var opt = document.createElement('option');
    	            opt.value = se2[i].value;
    	            var node = document.createTextNode(se2[i].innerHTML);
    	            opt.appendChild(node);
    	            se1.appendChild(opt);
    	            se2.removeChild(se2[i]);
    	            lenth = lenth -1;
    	            i=0
    	        }else{
    	        	i++;
    	        }
    	    }
    	}
    	
    	function saveRelatedProduct(){
    		var se1 = $('#relatedSelected')[0];
    		var arr = new Array();
    	    for(var i=0;i<se1.length;i++) {
    	    	arr.push(se1[i].value);
    	    }
    	    
    	    $.ajax({
            	type:"post",
                url: ctx + "/productRelated/save",
                data:"productId=${productId}&relatedIds=" +arr ,
                dataType:"json",
                success: function(msg){
                	if (msg.code == 1) {
                		bootbox.dialog({
        					message : "保存相关产品成功！",
        					//title : "温馨提示：",
        					buttons : {
        						main : {
        							label : "确定",
        							className : "btn btn-outline btn-primary",
        							callback : function() {
        									window.location.reload();
        							}
        						}
        					}
        				});
                	} else {
                		bootbox.alert("保存相关产品失败！");
                	}
                },
                error: function (msg) {
                	bootbox.alert(msg.message);
                }
            });
    	}
        

    </script>
</body>
</html>